<template>
  <div class="card-theme-2 h-full w-full relative" >
    <Container >
      <div class="card-theme-2-content h-full w-full relative" >
        <div class="header">
          <div class="title">{{ title }}</div>
        </div>
        <div class="content">
          <slot ></slot>
        </div>
      </div>
    </Container>
  </div>
</template>

<script lang="ts" setup>
import Container from "./_container.vue";

defineProps<{
  // 标题
  title?:string,
}>();
</script>

<style lang="scss">
.card-theme-2{
  .card-theme-2-content{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    > .header{
      height: 50px;

      > .title{
        height: 100%;
        width: 200px;
        padding-left: 25px;

        color: #fff;
        font-weight: bold;

        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-5px);
      }
    }
    > .content{
      flex: 1;
    }
  }
}
</style>
